<template>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
    <Card
      title="Gross Revenue"
      value="$120,054.24"
      pillText="2.75%"
      trend="up"
      period="From Jan 1st - Jul 31st"
    />
    <Card
      title="Avg Order"
      value="$27.97"
      pillText="1.01%"
      trend="down"
      period="From Jan 1st - Jul 31st"
    />
    <Card
      title="Trailing Year"
      value="$278,054.24"
      pillText="60.75%"
      trend="up"
      period="Previous 365 days"
    />
  </div>
</template>

<script setup lang="ts">
import Card from './Card.vue';

// Logic for StatCards (if any specific logic is needed besides displaying cards)
</script>

<style scoped>
/* StatCards styles will go here */
</style>